<!-- 每排总计6+4+4,共计14个排列 -->

<template>
  <div>
    <div class="flex flex-col gap-10px pb-10px">
      <!-- 套装选择tab -->
      <div class="flex flex-wrap w-100%">
        <template v-for="(suit, _) in suits" :key="_">
          <div class="flex items-center justify-center">
            <img
              class="w-35px h-35px object-contain"
              :src="getImageURL('equipment' + suit.imageUrl)"
              :alt="suit.name"
              :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
              @click="curSuit = suit.value"
              @dblclick="handleDoubleClick"
            />
          </div>
        </template>
      </div>
      <EquipmentRaritySelect v-model="curRarity" />
    </div>

    <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
      <template v-for="(equip, _) in suitEquipments" :key="_">
        <template v-if="equip?.rarity == curRarity || !curRarity">
          <EquipmentIcon
            :equipment="equip"
            :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.fusion != equip?.id"
            @click="configStore.chooseEqu(equip, true)"
          />
        </template>

        <template v-else>
          <EquipmentIcon />
        </template>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { IEquipment } from '@/api/info/type'
import { useConfigStore, useInfoStore } from '@/stores'
import { getImageURL } from '@/utils/images'
import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
import EquipmentRaritySelect from '@/components/dnf/Equipment/RaritySelect/index.vue'
const infoStore = useInfoStore()
const configStore = useConfigStore()
const curSuit = ref(16201)

const curRarity = ref()

const props = defineProps<{
  rowCount?: number
}>()

const rowCount = Math.max(props.rowCount ?? 0, 14)

const suits = computed(() => {
  const uniqueSuits = new Map<number, { name: string; value: number; imageUrl: string }>()
  infoStore.suits.forEach((a) => {
    if (!uniqueSuits.has(a.suitId)) {
      uniqueSuits.set(a.suitId, { name: a.name, value: a.suitId, imageUrl: a.imageUrl })
    }
  })
  return Array.from(uniqueSuits.values())
})

const suitEquipments = computed(() => {
  const equs = infoStore.stones.filter(
    (a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1,
  )

  const res: (IEquipment | undefined)[] = []
  const raritiyList = ['神器', '传说', '史诗']

  raritiyList.forEach((rarity) => {
    const equ: (IEquipment | undefined)[] = equs.filter((a) => a.rarity === rarity)
    equ.splice(5, 0, undefined)
    equ.splice(9, 0, undefined)
    res.push(...equ, ...Array(Math.max(0, rowCount - equ.length)).fill(undefined))
  })
  return res
})

const handleDoubleClick = () => {
  if (!curRarity.value) return
  if (curRarity.value == '太初') return
  suitEquipments.value
    .filter((a) => !!a && a.rarity == curRarity.value)
    .splice(0, 11)
    .forEach((a) => {
      configStore.chooseEqu(a, true)
    })
}
</script>
